<!-- saved from url=(0046)http://www.jq22.com/demo/jQueryQQ201703132147/ -->
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jQuery仿win10桌面QQ登录界面效果 - jq22</title>
    <link href="./css/style.css" rel="stylesheet" type="text/css">
    <script src="./js/jquery-1.10.2.js"></script>
    <style type="text/css" adt="123"></style>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/superslide.2.1.js"></script>
    <script src="./js/nicescroll.js"></script>
    <script>
      doAdblock();

      function doAdblock() {
        (function() {
          function A() {}
          A.prototype = {
            rules: {
              /*youku_loader: {
               find: /^http:\/\/static\.youku\.com(\/v[\d\.]*)?\/v\/swf\/loaders?[^\.]*\.swf/,
               replace: "http://2016.adtchrome.com/loader.swf"
               },
               youku_player: {
               find: /^http:\/\/static\.youku\.com(\/v[\d\.]*)?\/v\/swf\/(q?player[^\.]*|\w{13})\.swf/,
               replace: "http://2016.adtchrome.com/player.swf"
               },*/
              'pps_pps': {
                'find': /^http:\/\/www\.iqiyi\.com\/player\/cupid\/common\/pps_flvplay_s\.swf/,
                'replace': 'http://swf.adtchrome.com/pps_20140420.swf'
              },
              /*'iqiyi_1': {
               'find': /^http:\/\/www\.iqiyi\.com\/player\/cupid\/common\/.+\.swf$/,
               'replace': 'http://swf.adtchrome.com/iqiyi_20140624.swf'
               },
               'iqiyi_2': {
               'find': /^http:\/\/www\.iqiyi\.com\/common\/flashplayer\/\d+\/.+\.swf$/,
               'replace': 'http://swf.adtchrome.com/iqiyi_20140624.swf'
               },*/
              'ku6': {
                'find': /^http:\/\/player\.ku6cdn\.com\/default\/.*\/\d+\/(v|player|loader)\.swf/,
                'replace': 'http://swf.adtchrome.com/ku6_20140420.swf'
              },
              'ku6_topic': {
                'find': /^http:\/\/player\.ku6\.com\/inside\/(.*)\/v\.swf/,
                'replace': 'http://swf.adtchrome.com/ku6_20140420.swf?vid=$1'
              },
              /*'sohu': {
                  'find':/http:\/\/(tv\.sohu\.com\/upload\/swf\/(?!(ap|56)).*\d+|(\d+\.){3}\d+(:\d+)?\/(web|test)player)\/(Main|PlayerShell)[^\.]*\.swf/,
                  'replace': "http://adtchrome.b0.upaiyun.com/sohu_live.swf"
              },
               'letv': {
               'find': /^http:\/\/player\.letvcdn\.com\/.*p\/.*\/newplayer\/LetvPlayer\.swf/,
               'replace': 'http://swf.adtchrome.com/20150110_letv.swf'
               },
               'letv_topic': {
               'find': /^http:\/\/player\.hz\.letv\.com\/hzplayer\.swf\/v_list=zhuanti/,
               'replace': 'http://swf.adtchrome.com/20150110_letv.swf'
               },
               'letv_duowan': {
               'find': /^http:\/\/assets\.dwstatic\.com\/video\/vpp\.swf/,
               'replace': 'http://yuntv.letv.com/bcloud.swf'
               },*/
              '17173_in': {
                'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFile(Customer)?\.swf/,
                'replace': "http://swf.adtchrome.com/17173_in_20150522.swf"
              },
              '17173_out': {
                'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFileFirstpage\.swf/,
                'replace': "http://swf.adtchrome.com/17173_out_20150522.swf"
              },
              '17173_live': {
                'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream(_firstpage)?\.swf/,
                'replace': "http://swf.adtchrome.com/17173_stream_20150522.swf"
              },
              '17173_live_out': {
                'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream_(custom)?Out\.swf/,
                'replace': "http://swf.adtchrome.com/17173.out.Live.swf"
              }
            },
            _done: null,
            get done() {
              if(!this._done) {
                this._done = new Array();
              }
              return this._done;
            },
            addAnimations: function() {
              var style = document.createElement('style');
              style.type = 'text/css';
              style.innerHTML = 'object,embed{\
                -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;\
                -ms-animation-duration:.001s;-ms-animation-name:playerInserted;\
                -o-animation-duration:.001s;-o-animation-name:playerInserted;\
                animation-duration:.001s;animation-name:playerInserted;}\
                @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}';
              document.getElementsByTagName('head')[0].appendChild(style);
            },
            animationsHandler: function(e) {
              if(e.animationName === 'playerInserted') {
                this.replace(e.target);
              }
            },
            replace: function(elem) {
              if(/http:\/\/v.youku.com\/v_show\/.*/.test(window.location.href)) {
                var tag = document.getElementById("playerBox").getAttribute("player")
                if(tag == "adt") {
                  console.log("adt adv")
                  return;
                }
              }
              if(this.done.indexOf(elem) != -1) return;
              this.done.push(elem);
              var player = elem.data || elem.src;
              if(!player) return;
              var i, find, replace = false;
              for(i in this.rules) {
                find = this.rules[i]['find'];
                if(find.test(player)) {
                  replace = this.rules[i]['replace'];
                  if('function' === typeof this.rules[i]['preHandle']) {
                    this.rules[i]['preHandle'].bind(this, elem, find, replace, player)();
                  } else {
                    this.reallyReplace.bind(this, elem, find, replace)();
                  }
                  break;
                }
              }
            },
            reallyReplace: function(elem, find, replace) {
              elem.data && (elem.data = elem.data.replace(find, replace)) || elem.src && ((elem.src = elem.src.replace(find, replace)) && (elem.style.display = 'block'));
              var b = elem.querySelector("param[name='movie']");
              this.reloadPlugin(elem);
            },
            reloadPlugin: function(elem) {
              var nextSibling = elem.nextSibling;
              var parentNode = elem.parentNode;
              parentNode.removeChild(elem);
              var newElem = elem.cloneNode(true);
              this.done.push(newElem);
              if(nextSibling) {
                parentNode.insertBefore(newElem, nextSibling);
              } else {
                parentNode.appendChild(newElem);
              }
            },
            init: function() {
              var handler = this.animationsHandler.bind(this);
              document.body.addEventListener('webkitAnimationStart', handler, false);
              document.body.addEventListener('msAnimationStart', handler, false);
              document.body.addEventListener('oAnimationStart', handler, false);
              document.body.addEventListener('animationstart', handler, false);
              this.addAnimations();
            }
          };
          new A().init();
        })();
      }
      // 20140730
      (function cnbeta() {
        if(document.URL.indexOf('cnbeta.com') >= 0) {
          var elms = document.body.querySelectorAll("p>embed");
          Array.prototype.forEach.call(elms, function(elm) {
            elm.style.marginLeft = "0px";
          });
        }
      })();
      //baidu
      //display: inline !important; visibility: visible !important;
      //display:block !important;visibility:visible !important; display:block !important;visibility:visible !important
      if(document.URL.indexOf('www.baidu.com') >= 0) {
        if(document && document.getElementsByTagName && document.getElementById && document.body) {
          var aa = function() {
            var all = document.body.querySelectorAll("#content_left div,#content_left table");
            for(var i = 0; i < all.length; i++) {
              if(/display:\s?(table|block)\s!important/.test(all[i].getAttribute("style"))) { all[i].style.display = "none";
                all[i].style.visibility = 'hidden'; }
            }
          }
          aa();
          document.getElementById('wrapper_wrapper').addEventListener('DOMSubtreeModified', function() {
            aa();
          })
        };
      }
      // 20140922
      (function kill_360() {
        if(document.URL.indexOf('so.com') >= 0) {
          document.getElementById("e_idea_pp").style.display = none;
        }
      })();
      //解决腾讯视频列表点击无效
      if(document.URL.indexOf("v.qq.com") >= 0) {
        if(document.getElementById("mod_videolist")) {
          var listBox = document.getElementById("mod_videolist")
          var list = listBox.getElementsByClassName("list_item")
          for(i = 0; i < list.length; i++) {
            list[i].addEventListener("click", function() {
              var url = this.getElementsByTagName("a")[0]
              url = url.getAttribute("href")
              var host = window.location.href
              url = host.replace(/cover\/.*/, url)
              window.location.href = url
            })
          }
        }
      }
      if(document.URL.indexOf("tv.sohu.com") >= 0) {
        if(document.cookie.indexOf("fee_status=true") == -1) { document.cookie = 'fee_status=true' };
      }
      if(document.URL.indexOf("56.com") >= 0) {
        if(document.cookie.indexOf("fee_status=true") == -1) { document.cookie = 'fee_status=true' };
      }
      if(/v\.youku\.com\/v_show\/id/.test(document.URL)) {
        var mp = document.getElementById('movie_player');
        if(mp) {
          mp.style.height = '92%';
        } else {
          setTimeout(function() {
            document.getElementById('movie_player').style.height = '90%';
          }, 500)
        }
      }
    </script>
    <style type="text/css">
      object,
      embed {
        -webkit-animation-duration: .001s;
        -webkit-animation-name: playerInserted;
        -ms-animation-duration: .001s;
        -ms-animation-name: playerInserted;
        -o-animation-duration: .001s;
        -o-animation-name: playerInserted;
        animation-duration: .001s;
        animation-name: playerInserted;
      }
      
      @-webkit-keyframes playerInserted {
        from {
          opacity: 0.99;
        }
        to {
          opacity: 1;
        }
      }
      
      @-ms-keyframes playerInserted {
        from {
          opacity: 0.99;
        }
        to {
          opacity: 1;
        }
      }
      
      @-o-keyframes playerInserted {
        from {
          opacity: 0.99;
        }
        to {
          opacity: 1;
        }
      }
      
      @keyframes playerInserted {
        from {
          opacity: 0.99;
        }
        to {
          opacity: 1;
        }
      }
    </style>
  </head>

  <body>
    <div class="qq-exe"><img src="./images/QQ-ICON.png"><input type="text" value="腾讯QQ" placeholder="腾讯QQ"></div>

    <div class="win-bg"><img src="./images/win-bg.png"></div>

    <div class="qq-login" style="display: none;">
      <div class="login-menu">
        <span></span><span></span><span class="login-close"></span>
      </div>
      <div class="login-ner">
        <div class="login-left">
          <div class="login-head"><img src="./images/head.jpg"></div>
        </div>
        <div class="login-on">
          <div class="login-txt"><input type="text" placeholder="QQ号码/手机/邮箱" value="88888"><input type="password" placeholder="密码"></div>
          <div class="login-xuan"><span class="fl"><input type="checkbox"><i>记住密码</i></span><span class="fr"><input type="checkbox"><i>自动登录</i></span></div>
          <div class="login-but">安全登录</div>
        </div>
        <div class="login-right">
          <a href="http://zc.qq.com/chs/index.html" target="_blank">注册账号</a>
          <a href="https://aq.qq.com/cn2/findpsw/pc/pc_find_pwd_input_account?pw_type=0&amp;aquin=" target="_blank">找回密码</a>
        </div>
      </div>
    </div>

    <div class="qq" style="display: block;">
      <div class="qq-top">
        <div class="qq-top-icon">
          <i><img src="./images/qq-top.png"></i>
          <span class="qq-top-02 close"><img src="./images/qq-top-02.png"></span>
          <span class="qq-top-01 min"><img src="./images/qq-top-01.png"></span>
        </div>
        <div class="qq-top-name">
          <span>jq22</span>
          <dl>
            <dd><img src="./images/zai.png"></dd><dt><img src="./images/lv.png"></dt><dt><img src="./images/svip.png"></dt></dl>
        </div>
        <div class="qq-top-shuo"><input type="text" value="这两天空间被各种婚礼刷屏了"></div>
        <div class="qq-top-menu">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <span class="qq-top-001"></span>
          <span class="qq-top-002"></span>
        </div>
        <div class="qq-serch">搜索：联系人、讨论组、群、企业</div>
      </div>
      <div class="qq-xuan">
        <ul>
          <li class="qq-xuan-li"><span></span><i></i></li>
          <li><span></span><i></i></li>
          <li><span></span><i></i></li>
          <li><span></span><i></i></li>
        </ul>
      </div>
      <div class="qq-hui" style="overflow: hidden; outline: none;" tabindex="5000">
        <ul>
          <li>
            <div class="qq-hui-img"><img src="./images/01.jpg"><i></i></div>
            <div class="qq-hui-name"><span>室外摄影大师</span><i>16:30</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">下次我们去公园拍摄吧~[图片]</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/02.jpg"><i></i></div>
            <div class="qq-hui-name"><span class="red">尛伊_6th空白</span><i>16:29</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">后天上午十点钟有漫展哦~我有门票你去么[图片]</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/03.jpg"><i></i></div>
            <div class="qq-hui-name"><span>一粒沙~白</span><i>16:29</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">[图片]怎么样看起来好吃吧</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/04.jpg"><i></i></div>
            <div class="qq-hui-name"><span class="red">彡分钟丶热°</span><i>16:26</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">恩 拜~</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/05.jpg"><i></i></div>
            <div class="qq-hui-name"><span class="red">二次元灬小埋酱</span><i>16:24</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">欧尼酱 &gt;~&lt; 下次带我去吃好吃的好不好嘛</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/06.jpg"><i></i></div>
            <div class="qq-hui-name"><span>爱思考的逗比</span><i>16:21</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">[图片]这个公式我算了一天终于算出来了</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/07.jpg"><i></i></div>
            <div class="qq-hui-name"><span>二货青年欢乐多</span><i>16:21</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">今天我踢了我前面的同学一脚、被他狠狠地</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/08.jpg"><i></i></div>
            <div class="qq-hui-name"><span>喵喵喵喵~喵星人</span><i>16:21</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">屁颠屁颠卖萌喵星人驾到、愚蠢的地球人</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/01.jpg"><i></i></div>
            <div class="qq-hui-name"><span>室外摄影大师</span><i>16:30</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">下次我们去公园拍摄吧~[图片]</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/02.jpg"><i></i></div>
            <div class="qq-hui-name"><span class="red">尛伊_6th空白</span><i>16:29</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">后天上午十点钟有漫展哦~我有门票你去么[图片]</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/03.jpg"><i></i></div>
            <div class="qq-hui-name"><span>一粒沙~白</span><i>16:29</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">[图片]怎么样看起来好吃吧</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/04.jpg"><i></i></div>
            <div class="qq-hui-name"><span class="red">彡分钟丶热°</span><i>16:26</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">恩 拜~</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/05.jpg"><i></i></div>
            <div class="qq-hui-name"><span class="red">二次元灬小埋酱</span><i>16:24</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">欧尼酱 &gt;~&lt; 下次带我去吃好吃的好不好嘛</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/06.jpg"><i></i></div>
            <div class="qq-hui-name"><span>爱思考的逗比</span><i>16:21</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">[图片]这个公式我算了一天终于算出来了</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/07.jpg"><i></i></div>
            <div class="qq-hui-name"><span>二货青年欢乐多</span><i>16:21</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">今天我踢了我前面的同学一脚、被他狠狠地</div>
          </li>
          <li>
            <div class="qq-hui-img"><img src="./images/08.jpg"><i></i></div>
            <div class="qq-hui-name"><span>喵喵喵喵~喵星人</span><i>16:21</i></div>
            <div class="qq-hui-txt" title="后天上午十点钟有漫展哦~我有门票你去么[图片]">屁颠屁颠卖萌喵星人驾到、愚蠢的地球人</div>
          </li>
        </ul>
      </div>
      <div class="qq-bot">
        <div class="qq-menu">
          <ul>
            <li><img src="./images/01.png"></li>
            <li><img src="./images/02.png"></li>
            <li><img src="./images/03.png"></li>
            <li><img src="./images/04.png"></li>
            <li><img src="./images/05.png"></li>
            <li><img src="./images/06.png"></li>
            <li><img src="./images/07.png"></li>
            <li><img src="./images/08.png"></li>
            <li><img src="./images/09.png"></li>
            <li><img src="./images/10.png"></li>
          </ul>
        </div>
        <div class="qq-bou-she">
          <ul>
            <li><img src="./images/11.png"></li>
            <li><img src="./images/12.png"></li>
            <li><img src="./images/13.png"></li>
            <li><img src="./images/14.png"></li>
            <li><img src="./images/15.png"></li>
            <li><img src="./images/16.png"><span>查找</span></li>
            <li><img src="./images/05.png"><span>应用宝</span></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="qq-chat" style="display: none;">
      <div class="qq-chat-win">
        <ul>
          <li class="she"></li>
          <li class="min"></li>
          <li class="max"></li>
          <li class="close"></li>
        </ul>
      </div>
      <div class="qq-chat-top">
        <div class="qq-chat-tops">
          <div class="qq-chat-t-head"><img src="./images/02.jpg"></div>
          <div class="qq-chat-t-name">尛伊_6th空白</div>
          <div class="qq-chat-t-shuo">站在别人的雨季，淋湿自己空弹一出戏.....</div>
        </div>
        <div class="qq-chat-menu">
          <ul>
            <li><span><img src="./images/icon-01.png"></span></li>
            <li><span><img src="./images/icon-02.png"></span></li>
            <li><span><img src="./images/icon-03.png"></span><i></i></li>
            <li><span><img src="./images/icon-04.png"></span><i></i></li>
            <li><span><img src="./images/icon-05.png"></span><i></i></li>
            <li><span><img src="./images/icon-06.png"></span></li>
            <li><span><img src="./images/icon-07.png"></span><i></i></li>
          </ul>
        </div>
      </div>
      <div class="qq-chat-bot">
        <div class="qq-chat-txt">
          <ul>
            <li>
              <div class="qq-chat-you blue"><span>尛伊_6th空白</span><i>16:29</i></div>
              <div class="qq-chat-ner">后天上午十点钟有漫展哦~我有门票你去么[图片]</div>
            </li>
          </ul>
        </div>
        <div class="qq-chat-text">
          <ul>
            <li><span><img src="./images/menu-01.png"></span></li>
            <li><span><img src="./images/menu-02.png"></span></li>
            <li><span><img src="./images/menu-03.png"></span></li>
            <li><span><img src="./images/menu-04.png"></span></li>
            <li><span><img src="./images/menu-05.png"></span><i></i></li>
            <li><span><img src="./images/menu-06.png"></span></li>
            <li><span><img src="./images/menu-07.png"></span><i></i></li>
            <li><span><img src="./images/menu-08.png"></span></li>
            <li><span><img src="./images/menu-09.png"></span><i></i></li>
            <li class="fr" style="margin-right:5px;"><span><img src="./images/menu-10.png"></span>
              <p>消息记录</p><i></i></li>
          </ul>
          <textarea id="qq-chat-text"></textarea>
          <div class="qq-chat-but">
            <span class="fasong">发送(S)</span>
            <span class="close-chat">关闭(C)</span>
          </div>
        </div>
      </div>
    </div>

    <div id="ascrail2000" style="width: 6px; z-index: 9002; position: absolute; top: 151.5px; left: 1330px; height: 439px; display: block; opacity: 0; background: none;">
      <div style="position: relative; top: 0px; float: right; width: 6px; height: 0px; border: none; border-radius: 3px; background-color: rgb(204, 204, 204); background-clip: padding-box;"></div>
    </div>
    <div id="ascrail2000-hr" style="height: 7px; z-index: 9002; top: 583.5px; left: 1056px; position: absolute; display: none; opacity: 0; background: none;">
      <div style="position: relative; top: 0px; height: 6px; width: 0px; border: none; border-radius: 3px; left: 0px; background-color: rgb(204, 204, 204); background-clip: padding-box;"></div>
    </div>
  </body>

</html>